<template>
  <div class="reading-analysis">
    <!-- 命主综述 -->
    <div class="analysis-section overview-section">
      <div class="section-header">
        <h3 class="section-title">
          <span class="title-icon">☯</span>
          命主综述
        </h3>
      </div>
      
      <div class="section-content">
        <p class="content-paragraph">
          {{ userInfo.name }}，{{ genderText }}命，紫微斗数命盘显示您的命宫位于{{ getMingGongDescription() }}，
          {{ getMingGongMainStarDescription() }}
        </p>
        
        <p class="content-paragraph">
          根据紫微斗数理论，您的先天气质{{ getTemperamentDescription() }}
          性格上表现为{{ getPersonalityDescription() }}
        </p>
        
        <p class="content-paragraph">
          命主的整体运势发展轨迹：{{ getLifeTrajectoryDescription() }}
        </p>
      </div>
    </div>
    
    <!-- 性格特质 -->
    <div class="analysis-section traits-section">
      <div class="section-header">
        <h3 class="section-title">
          <span class="title-icon">✧</span>
          性格特质
        </h3>
      </div>
      
      <div class="traits-grid">
        <div class="trait-column strength-traits">
          <h4 class="trait-title">
            <span class="trait-symbol">🌟</span>
            优势特质
          </h4>
          <ul class="trait-list">
            <li v-for="(trait, index) in getStrengthTraits()" :key="'strength-'+index">
              {{ trait }}
            </li>
          </ul>
        </div>
        
        <div class="trait-column challenge-traits">
          <h4 class="trait-title">
            <span class="trait-symbol">🔍</span>
            挑战特质
          </h4>
          <ul class="trait-list">
            <li v-for="(trait, index) in getChallengeTraits()" :key="'challenge-'+index">
              {{ trait }}
            </li>
          </ul>
        </div>
      </div>
    </div>
    
    <!-- 事业财运 -->
    <div class="analysis-section career-section">
      <div class="section-header">
        <h3 class="section-title">
          <span class="title-icon">🏆</span>
          事业财运
        </h3>
      </div>
      
      <div class="section-content">
        <p class="content-paragraph">
          从事业宫来看，{{ getCareerDescription() }}
        </p>
        
        <p class="content-paragraph">
          在财帛宫方面，{{ getWealthDescription() }}
        </p>
        
        <div class="suitable-careers">
          <span class="careers-label">适合的职业领域：</span>
          <div class="careers-tags">
            <span class="career-tag" v-for="(field, index) in getSuitableCareerFieldsArray()" :key="index">
              {{ field }}
            </span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 情感姻缘 -->
    <div class="analysis-section relationship-section">
      <div class="section-header">
        <h3 class="section-title">
          <span class="title-icon">❤️</span>
          情感姻缘
        </h3>
      </div>
      
      <div class="section-content">
        <p class="content-paragraph">
          从夫妻宫看，{{ getRelationshipDescription() }}
        </p>
        
        <p class="content-paragraph">
          您在感情关系中的特点是{{ getRelationshipTraits() }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ReadingAnalysis',
  props: {
    chartData: Object,
    userInfo: Object
  },
  computed: {
    genderText() {
      return this.userInfo.gender === 'male' ? '男' : '女';
    }
  },
  methods: {
    getEarthlyBranch(position) {
      const branches = ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'];
      return branches[(position - 1) % 12];
    },
    
    getMingGongDescription() {
      if (!this.chartData || !this.chartData.palaces) return '';
      
      const mingGong = this.chartData.palaces.find(p => p.name === '命宫');
      if (!mingGong) return '';
      
      return this.getEarthlyBranch(mingGong.position) + '宫';
    },
    
    getMingGongMainStars() {
      if (!this.chartData || !this.chartData.palaces || !this.chartData.stars) return [];
      
      const mingGong = this.chartData.palaces.find(p => p.name === '命宫');
      if (!mingGong) return [];
      
      const mainStarList = ['紫微', '天机', '太阳', '武曲', '天同', '廉贞', '天府', 
                           '太阴', '贪狼', '巨门', '天相', '天梁', '七杀', '破军'];
      
      return Object.entries(this.chartData.stars)
        .filter(([star, pos]) => pos === mingGong.position && mainStarList.includes(star))
        .map(([star]) => star);
    },
    
    getMingGongMainStarDescription() {
      const stars = this.getMingGongMainStars();
      if (stars.length === 0) return '命宫无主星';
      
      return `命宫主星为${stars.join('、')}，这表明您的基本性格和人生特质。`;
    },
    
    getTemperamentDescription() {
      // 根据命宫星曜生成性格描述
      const stars = this.getMingGongMainStars();
      
      // 根据不同的主星组合生成不同的描述
      if (stars.includes('紫微')) {
        return '温和稳重，具有领导才能，性格坚毅，做事追求完美。';
      } else if (stars.includes('天机')) {
        return '聪明灵活，思维敏捷，有创造力，善于分析问题。';
      } else if (stars.includes('太阳')) {
        return '阳光开朗，乐观向上，人缘较好，具有感染力。';
      } else if (stars.includes('武曲')) {
        return '行动力强，做事果断，意志坚定，有组织能力。';
      } else if (stars.includes('天同')) {
        return '心地善良，富有同情心，随和大度，乐于助人。';
      } else {
        return '兼具理性与感性，做事有条理，对生活有自己的规划和理解。';
      }
    },
    
    getPersonalityDescription() {
      // 根据命宫及其它宫位星曜组合生成性格特点描述
      const stars = this.getMingGongMainStars();
      
      if (stars.includes('紫微') || stars.includes('天府')) {
        return '沉稳内敛，处事冷静，有较强的自制力，善于思考和规划。';
      } else if (stars.includes('太阳') || stars.includes('天机')) {
        return '活泼开朗，善于表达，有较强的社交能力，乐于分享自己的想法。';
      } else if (stars.includes('武曲') || stars.includes('七杀')) {
        return '果断坚决，有主见，行动力强，遇事不拖泥带水，但可能较为固执。';
      } else if (stars.includes('天同') || stars.includes('太阴')) {
        return '温和敦厚，心思细腻，情感丰富，有较强的同理心，但有时可能过于感性。';
      } else {
        return '性格较为平衡，既有理性的一面，也有感性的特质，能够根据不同场合调整自己的行为方式。';
      }
    },
    
    getLifeTrajectoryDescription() {
      // 根据大限和流年数据生成人生轨迹描述
      const birthYear = parseInt(this.userInfo.birthYear);
      const gender = this.userInfo.gender;
      
      // 根据性别和出生年份特点生成不同的人生轨迹描述
      if (gender === 'male') {
        if (birthYear % 2 === 0) {
          return '前半生有挑战但也有机遇，中年之后事业趋于稳定，晚年福泰安康。您的人生呈稳步上升的态势，虽有波折但总体向好。';
        } else {
          return '青少年时期学业较为顺利，中年阶段可能面临事业转型，经过努力后能获得成功，晚年生活丰富多彩。';
        }
      } else {
        if (birthYear % 2 === 0) {
          return '年轻时充满活力和创造力，中年家庭和事业双丰收，晚年生活安定祥和。整体而言，您的人生较为平顺，偶有起伏但能妥善度过。';
        } else {
          return '求学阶段表现良好，成年后在事业上会经历一些起伏，通过自身努力能够克服困难，晚年生活幸福安稳。';
        }
      }
    },
    
    getStrengthTraits() {
      // 根据命盘信息生成性格优势
      const stars = this.getMingGongMainStars();
      
      const baseTraits = [
        '有责任感，做事认真负责',
        '思维逻辑清晰，善于分析问题',
        '适应能力强，能够从容应对变化'
      ];
      
      if (stars.includes('紫微') || stars.includes('天府')) {
        return [
          '领导能力强，善于统筹全局',
          '做事沉稳，不急不躁',
          '有较强的自律性和执行力',
          ...baseTraits
        ];
      } else if (stars.includes('太阳') || stars.includes('天机')) {
        return [
          '人际交往能力出色，容易获得他人好感',
          '思维活跃，创造力强',
          '乐观向上，积极面对挑战',
          ...baseTraits
        ];
      } else {
        return [
          '做事踏实稳重，脚踏实地',
          '善于聆听，尊重他人观点',
          '情绪稳定，不易受外界干扰',
          ...baseTraits
        ];
      }
    },
    
    getChallengeTraits() {
      // 根据命盘信息生成性格挑战
      const stars = this.getMingGongMainStars();
      
      const baseTraits = [
        '有时会顾虑过多，影响决策效率',
        '在压力大时可能情绪波动',
        '对自己要求较高，容易产生自我压力'
      ];
      
      if (stars.includes('紫微') || stars.includes('天府')) {
        return [
          '可能过于固执己见，不易接受新思想',
          '有时显得较为高傲，不够亲和',
          '期望过高，容易对现实感到失望',
          ...baseTraits
        ];
      } else if (stars.includes('太阳') || stars.includes('天机')) {
        return [
          '有时过于乐观，低估困难',
          '精力分散，不够专注',
          '可能缺乏耐心，追求即时满足',
          ...baseTraits
        ];
      } else {
        return [
          '变通能力有待提高，可能较为死板',
          '进取心有时不足，安于现状',
          '表达能力可能有所欠缺',
          ...baseTraits
        ];
      }
    },
    
    getCareerDescription() {
      // 根据官禄宫信息生成事业描述
      if (!this.chartData || !this.chartData.palaces || !this.chartData.stars) {
        return '事业发展整体平稳，通过自身努力能获得相应成就。';
      }
      
      const careerPalace = this.chartData.palaces.find(p => p.name === '官禄宫');
      if (!careerPalace) {
        return '事业发展整体平稳，通过自身努力能获得相应成就。';
      }
      
      const position = careerPalace.position;
      const branch = this.getEarthlyBranch(position);
      
      // 根据官禄宫地支生成不同的事业描述
      const descriptions = {
        '子': '您在事业上细心谨慎，善于把握细节，适合从事需要精确和专注的工作。职业生涯可能起步较慢，但中年后会有较大发展。',
        '丑': '您在工作中踏实稳重，有耐心，能够长期专注于一个领域并深入发展。事业上升期在35岁以后，发展较为稳定。',
        '寅': '您有较强的事业心和进取精神，善于抓住机会，勇于开拓创新。事业发展较早，但需注意稳定性。',
        '卯': '您思维活跃，反应快速，在事业上有创新能力和冒险精神。适合富有变化和挑战性的工作环境。',
        '辰': '您在事业上善于协调和平衡各方关系，有组织能力，适合管理工作。事业发展可能有起伏，但总体向上。',
        '巳': '您有较强的表达能力和说服力，在事业上善于展示自己的才能，容易获得上级赏识。',
        '午': '您在工作中热情积极，有领导才能，愿意承担责任。事业发展主动性强，成就与付出成正比。',
        '未': '您在事业上注重团队合作，人际关系良好，能够借助外力发展。发展路径可能较为曲折但最终能有所成就。',
        '申': '您做事有条理，逻辑思维强，善于分析和解决问题。事业上适合需要专业知识和技能的领域。',
        '酉': '您做事认真负责，追求完美，在专业领域有较深造诣。职业生涯可能精专于某一领域并获得认可。',
        '戌': '您在事业上忠诚可靠，有责任感，能够长期坚守岗位。事业发展虽不急剧但稳定持久。',
        '亥': '您思想开放，接受新事物能力强，在事业上有创新意识。职业生涯可能会有多次转变和突破。'
      };
      
      return descriptions[branch] || '您在事业上有自己的发展路径和节奏，通过努力能获得适合自己的成就。';
    },
    
    getWealthDescription() {
      // 根据财帛宫信息生成财富描述
      if (!this.chartData || !this.chartData.palaces || !this.chartData.stars) {
        return '财运总体稳定，收入与付出基本成正比。';
      }
      
      const wealthPalace = this.chartData.palaces.find(p => p.name === '财帛宫');
      if (!wealthPalace) {
        return '财运总体稳定，收入与付出基本成正比。';
      }
      
      const position = wealthPalace.position;
      const branch = this.getEarthlyBranch(position);
      
      // 根据财帛宫地支生成不同的财富描述
      const descriptions = {
        '子': '财运较为稳定，善于积累，理财能力不错。财富增长可能不快但较为持久，适合长线投资。',
        '丑': '财运踏实，来财正道，收入较为稳定。善于控制支出，有较好的节俭习惯。',
        '寅': '财运波动较大，有意外收获的可能，但也需防止突发支出。适合多元化投资策略。',
        '卯': '财运活跃，收入来源多样，但也容易有冲动消费。财富管理上需增强规划意识。',
        '辰': '财运中等偏上，有稳定收入来源。在理财方面需谨慎，避免过于保守或冒进。',
        '巳': '财运较好，善于把握机会增加收入。投资眼光不错，但需控制风险偏好。',
        '午': '财运明显，收入较为可观，但支出也相应增加。建议加强预算管理，避免入不敷出。',
        '未': '财运平稳，收入趋于稳定增长。善于借助人脉获取财富机会，人际资源对财运有促进作用。',
        '申': '财运理性，善于分析投资机会，理财能力较强。收入多来自专业技能和知识积累。',
        '酉': '财运精细，对财务状况有清晰把握，消费理性。适合精益求精的财富管理策略。',
        '戌': '财运厚实，积累稳健，不追求暴利。长期稳定的投资和储蓄习惯会带来可观的财富积累。',
        '亥': '财运多变，可能有意外财源，投资偏好新兴领域。建议保持适当的流动资金以应对变化。'
      };
      
      return descriptions[branch] || '您的财富观念务实，收入与努力基本成正比，通过合理规划能够实现财务自由。';
    },
    
    getSuitableCareerFields() {
      // 根据命盘信息推荐适合的职业领域
      const stars = this.getMingGongMainStars();
      const careerFields = [];
      
      if (stars.includes('紫微') || stars.includes('天梁')) {
        careerFields.push('管理', '行政', '领导');
      }
      
      if (stars.includes('天机') || stars.includes('巨门')) {
        careerFields.push('科研', '技术', '写作', '媒体');
      }
      
      if (stars.includes('太阳') || stars.includes('天相')) {
        careerFields.push('公共关系', '营销', '表演', '教育');
      }
      
      if (stars.includes('武曲') || stars.includes('贪狼')) {
        careerFields.push('金融', '投资', '企业家', '销售');
      }
      
      if (stars.includes('天同') || stars.includes('太阴')) {
        careerFields.push('医疗', '服务', '咨询', '心理健康');
      }
      
      if (careerFields.length === 0) {
        careerFields.push('管理', '技术', '服务', '创意');
      }
      
      return careerFields.slice(0, 4).join('、');
    },
    
    getSuitableCareerFieldsArray() {
      // 返回职业领域数组而不是字符串，用于生成标签
      return this.getSuitableCareerFields().split('、');
    },
    
    getRelationshipDescription() {
      // 根据夫妻宫信息生成情感描述
      if (!this.chartData || !this.chartData.palaces || !this.chartData.stars) {
        return '在感情中注重沟通和理解，能够建立稳定的关系。';
      }
      
      const relationshipPalace = this.chartData.palaces.find(p => p.name === '夫妻宫');
      if (!relationshipPalace) {
        return '在感情中注重沟通和理解，能够建立稳定的关系。';
      }
      
      const position = relationshipPalace.position;
      const branch = this.getEarthlyBranch(position);
      
      // 根据夫妻宫地支生成不同的情感描述
      const descriptions = {
        '子': '您在感情中较为谨慎，不会轻易付出真心，但一旦确定关系则忠诚稳定。感情发展可能缓慢但深厚。',
        '丑': '您在感情中注重实际和稳定，寻求安全感。理想的伴侣是踏实可靠、能共同经营生活的人。',
        '寅': '您在感情中充满活力和激情，有主见，不喜欢被约束。需要在关系中保持一定的独立空间。',
        '卯': '您在感情上直率真诚，表达方式开放，重视交流和分享。感情发展较快，但也需注意深度培养。',
        '辰': '您在感情中较为包容和理解，善于调和矛盾，但有时优柔寡断。适合与性格互补的伴侣相处。',
        '巳': '您在感情中展现魅力和吸引力，有较强的掌控欲，希望引领关系发展。需要学会适当妥协。',
        '午': '您在感情中热情奔放，重视仪式感和浪漫，但有时较为理想化。需要平衡激情和现实。',
        '未': '您在感情中体贴周到，善解人意，愿意为伴侣付出。但也要注意维护自己的边界。',
        '申': '您在感情中理性分析，有自己的标准和原则，不会盲目投入。适合与志同道合的伴侣发展。',
        '酉': '您在感情中追求完美，对伴侣要求较高，细节敏感。需要学会接受对方的不完美。',
        '戌': '您在感情中重视忠诚和承诺，愿意为关系付出努力，有责任感。适合长期稳定的关系。',
        '亥': '您在感情中思想开放，善于接纳新观念，重视精神层面的契合。寻找灵魂伴侣类型的关系。'
      };
      
      return descriptions[branch] || '您在感情中有自己独特的相处方式，能够根据对方特点调整自己，建立和谐关系。';
    },
    
    getRelationshipTraits() {
      // 生成感情关系中的特点
      const gender = this.userInfo.gender;
      
      if (gender === 'male') {
        return '重视情感交流，希望建立平等互信的关系，在亲密关系中既能保持自我特点，又能与伴侣共同成长。';
      } else {
        return '既有独立自主的一面，又能照顾他人感受，在感情中注重情感安全感和相互理解，能够建立健康的亲密关系。';
      }
    }
  }
};
</script>

<style lang="scss">
// 中国传统颜色变量
$imperial-gold: #d4af37;
$scroll-beige: #f5ecd9;
$cinnabar-red: #8a2924;
$jade-green: #286649;
$ochre-yellow: #c3832a;
$deep-brown: #6d3d14;
$pale-yellow: #fcf4dc;
$ink-black: #272829;
$regal-purple: #7b4f9e;

// 五行颜色变量
$element-wood: #68904d;    // 木
$element-fire: #c14536;    // 火
$element-earth: #b5a642;   // 土
$element-metal: #949494;   // 金
$element-water: #5a7d9a;   // 水

// 命盘解析整体样式
.reading-analysis {
  font-family: 'SimSun', 'STFangsong', serif;
  color: $deep-brown;
  
  // 通用区块样式
  .analysis-section {
    background-color: $scroll-beige;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba($deep-brown, 0.1);
    background-image: url('');
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: 0 4px 12px rgba($deep-brown, 0.15);
      transform: translateY(-2px);
    }
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
    }
    
    // 不同区块的顶部装饰色
    &.overview-section::before {
      background: linear-gradient(90deg, $regal-purple, $deep-brown, $regal-purple);
    }
    
    &.traits-section::before {
      background: linear-gradient(90deg, $element-earth, $element-wood, $element-earth);
    }
    
    &.career-section::before {
      background: linear-gradient(90deg, $element-metal, $element-fire, $element-metal);
    }
    
    &.relationship-section::before {
      background: linear-gradient(90deg, $element-water, $element-fire, $element-water);
    }
  }
  
  // 区块标题
  .section-header {
    padding: 1rem;
    border-bottom: 1px dashed rgba($deep-brown, 0.3);
    
    .section-title {
      font-size: 1.25rem;
      font-weight: bold;
      color: $deep-brown;
      margin: 0;
      display: flex;
      align-items: center;
      
      .title-icon {
        margin-right: 0.5rem;
        font-size: 1.1rem;
      }
    }
  }
  
  // 区块内容
  .section-content {
    padding: 1rem;
    line-height: 1.6;
    
    .content-paragraph {
      margin-bottom: 1rem;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  
  // 性格特质网格
  .traits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
    
    @media (min-width: 768px) {
      grid-template-columns: 1fr 1fr;
    }
  }
  
  // 性格特质列
  .trait-column {
    background-color: rgba(white, 0.6);
    border-radius: 0.5rem;
    padding: 1rem;
    border: 1px solid rgba($deep-brown, 0.1);
    
    &.strength-traits {
      border-left: 3px solid $element-wood;
    }
    
    &.challenge-traits {
      border-left: 3px solid $element-fire;
    }
  }
  
  // 特质标题
  .trait-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: $deep-brown;
    margin: 0 0 0.75rem 0;
    display: flex;
    align-items: center;
    
    .trait-symbol {
      margin-right: 0.5rem;
    }
  }
  
  // 特质列表
  .trait-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    
    li {
      position: relative;
      padding-left: 1.25rem;
      margin-bottom: 0.5rem;
      
      &::before {
        content: '•';
        position: absolute;
        left: 0.25rem;
        color: $ochre-yellow;
        font-size: 1.2rem;
      }
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  
  // 职业领域标签
  .suitable-careers {
    margin-top: 1rem;
    
    .careers-label {
      font-weight: 600;
      display: block;
      margin-bottom: 0.5rem;
    }
    
    .careers-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    
    .career-tag {
      display: inline-block;
      padding: 0.4rem 0.8rem;
      border-radius: 1rem;
      background-color: rgba($element-earth, 0.15);
      border: 1px solid rgba($element-earth, 0.3);
      color: darken($element-earth, 10%);
      font-size: 0.875rem;
      transition: all 0.2s ease;
      
      &:hover {
        background-color: rgba($element-earth, 0.25);
        transform: translateY(-2px);
      }
    }
  }
  
  // 为不同区块设置不同背景色调
  .overview-section {
    background-color: rgba($scroll-beige, 0.9);
  }
  
  .traits-section {
    background-color: rgba(mix($scroll-beige, $element-earth, 92%), 0.9);
  }
  
  .career-section {
    background-color: rgba(mix($scroll-beige, $element-metal, 92%), 0.9);
  }
  
  .relationship-section {
    background-color: rgba(mix($scroll-beige, $element-water, 95%), 0.9);
  }
  
  // 响应式调整
  @media (max-width: 768px) {
    .section-title {
      font-size: 1.125rem;
    }
    
    .section-content, .traits-grid {
      padding: 0.75rem;
    }
  }
  
  // 添加微妙的动画效果
  @keyframes gentle-glow {
    0%, 100% {
      box-shadow: 0 2px 8px rgba($deep-brown, 0.1);
    }
    50% {
      box-shadow: 0 2px 12px rgba($deep-brown, 0.15);
    }
  }
  
  .analysis-section {
    animation: gentle-glow 5s infinite alternate;
  }
}
</style>